<template>
<label>{{ label }}
  <div class="input-group">
    <input class="input-group-field" type="text" v-model="txtVal" readonly>
    <div class="input-group-button">
      <button class="button" :title="$t(title)" @click="handler">
        <et-icon :name="icon" />
      </button>
    </div>
  </div>
</label>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    label: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    handler: {
      type: Function,
      default: () => {}
    },
    initVal: {
      type: String
    }
  },

  data() {
    return {
      txtVal: null
    };
  },

  watch: {
    initVal() {
      if (this.initVal) {
        this.txtVal = this.initVal;
      }
    }
  },

  methods: {
    reset() {
      this.txtVal = null;
    }
  }

};
</script>
